<template>
	<Echart id="rightTop" :options="option" class="right_top_inner" v-if="pageflag" ref="charts" />
</template>

<script>
	import {
		currentPOST
	} from "api/modules";
	import {
		graphic
	} from "echarts"
	export default {
		data() {
			return {
				option: {},
				pageflag: false,
				timer: null,
			};
		},
		created() {

		},
		mounted() {
			this.getData();
		},
		beforeDestroy() {
			this.clearData();
		},
		methods: {
			clearData() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},
			getData() {
				this.pageflag = true;
				currentPOST("/ipac-apic/bigScreen/orderTimeCount", {
                    n: 15
                }).then((res) => {
					let times = []
					let orderInstruments = []
					let orderInfrastructures = []
					if (res.code == 200) {
						times = res.data.orderInstruments.map((v) => {
							return v.time
						})
						res.data.orderInstruments.forEach((v) => {
							orderInstruments.push(v.count)
						})
						res.data.orderInfrastructures.forEach((v) => {
							orderInfrastructures.push(v.count)
						})
						this.$nextTick(() => {
							this.init(times, orderInstruments, orderInfrastructures)
							this.switper();
						});
					} else {
						this.pageflag = false;
						this.$Message({
							text: res.msg,
							type: "warning",
						});
					}
				});
			},
			//轮询
			switper() {
				if (this.timer) {
					return;
				}
				let looper = (a) => {
					this.getData();
				};
				this.timer = setInterval(
					looper,
					this.$store.state.setting.echartsAutoTime
				);
				let myChart = this.$refs.charts.chart;
				myChart.on("mouseover", (params) => {
					this.clearData();
				});
				myChart.on("mouseout", (params) => {
					this.timer = setInterval(
						looper,
						this.$store.state.setting.echartsAutoTime
					);
				});
			},
			init(xData, yData, yData2) {
				this.option = {
					xAxis: {
						type: "category",
						data: xData,
						boundaryGap: false, // 不留白，从原点开始
						splitLine: {
							show: true,
							lineStyle: {
								color: "rgba(31,99,163,.2)",
							},
						},
						axisLine: {
							// show:false,
							lineStyle: {
								color: "rgba(31,99,163,.1)",
							},
						},
						axisLabel: {
							color: "#7EB7FD",
							fontWeight: "500",
						},
					},
					yAxis: {
						type: "value",
						splitLine: {
							show: true,
							lineStyle: {
								color: "rgba(31,99,163,.2)",
							},
						},
						axisLine: {
							lineStyle: {
								color: "rgba(31,99,163,.1)",
							},
						},
						axisLabel: {
							color: "#7EB7FD",
							fontWeight: "500",
						},
					},
					tooltip: {
						trigger: "axis",
						backgroundColor: "rgba(0,0,0,.6)",
						borderColor: "rgba(147, 235, 248, .8)",
						textStyle: {
							color: "#FFF",
						},
					},
					grid: {
						//布局
						show: true,
						left: "10px",
						right: "30px",
						bottom: "10px",
						top: "28px",
						containLabel: true,
						borderColor: "#1F63A3",
					},
					series: [{
							data: yData,
							type: "line",
							smooth: true,
							symbol: "none", //去除点
							name: "科研仪器",
							color: "rgba(252,144,16,.7)",
							areaStyle: {
								//右，下，左，上
								color: new graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[{
											offset: 0,
											color: "rgba(252,144,16,.7)",
										},
										{
											offset: 1,
											color: "rgba(252,144,16,.0)",
										},
									],
									false
								),
							},
							markPoint: {
								data: [{
										name: "最大值",
										type: "max",
										valueDim: "y",
										symbol: "rect",
										symbolSize: [60, 26],
										symbolOffset: [0, -20],
										itemStyle: {
											color: "rgba(0,0,0,0)",
										},
										label: {
											color: "#FC9010",
											backgroundColor: "rgba(252,144,16,0.1)",
											borderRadius: 6,
											padding: [7, 14],
											borderWidth: 0.5,
											borderColor: "rgba(252,144,16,.5)",
											formatter: "科研设施：{c}",
										},
									},
									{
										name: "最大值",
										type: "max",
										valueDim: "y",
										symbol: "circle",
										symbolSize: 6,
										itemStyle: {
											color: "#FC9010",
											shadowColor: "#FC9010",
											shadowBlur: 8,
										},
										label: {
											formatter: "",
										},
									},
								],
							},
						},
						{
							data: yData2,
							type: "line",
							smooth: true,
							symbol: "none", //去除点
							name: "科研设施",
							color: "rgba(9,202,243,.7)",
							areaStyle: {
								//右，下，左，上
								color: new graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[{
											offset: 0,
											color: "rgba(9,202,243,.7)",
										},
										{
											offset: 1,
											color: "rgba(9,202,243,.0)",
										},
									],
									false
								),
							},
							markPoint: {
								data: [{
										name: "最大值",
										type: "max",
										valueDim: "y",
										symbol: "rect",
										symbolSize: [60, 26],
										symbolOffset: [0, -20],
										itemStyle: {
											color: "rgba(0,0,0,0)",
										},
										label: {
											color: "#09CAF3",
											backgroundColor: "rgba(9,202,243,0.1)",

											borderRadius: 6,
											borderColor: "rgba(9,202,243,.5)",
											padding: [7, 14],
											formatter: "科研设施：{c}",
											borderWidth: 0.5,
										},
									},
									{
										name: "最大值",
										type: "max",
										valueDim: "y",
										symbol: "circle",
										symbolSize: 6,
										itemStyle: {
											color: "#09CAF3",
											shadowColor: "#09CAF3",
											shadowBlur: 8,
										},
										label: {
											formatter: "",
										},
									},
								],
							},
						},
					],
				};
			},
		},
	};
</script>
<style lang='scss' scoped>
	.right_top_inner {
		margin-top: -8px;
	}
</style>